<template>
  <view class="app">
    <view class="header-bg">
      <view class="flex flex-col items-center mt-80rpx">
        <view class="withdraw-title">可提现金额（元）</view>
        <view class="withdraw-money">5000.00</view>
      </view>

      <view class="withdraw-box">
        <view class="font-size-24rpx color-gray">提现金额</view>
        <view class="flex justify-between mt-15rpx">
          <input class="withdraw-input" type="number" />
          <view class="withdraw-btn">提 现</view>
        </view>
        <view class="withdraw-tips"> 手续费每笔2元 </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 400rpx;
    background: linear-gradient(to bottom, #17706c, #0d4e49);
    border-bottom-left-radius: 50% 15%;
    border-bottom-right-radius: 50% 15%;

    .withdraw-title {
      color: #fff;
      opacity: 0.7;
      font-size: 26rpx;
      margin: 0 0 0rpx 40rpx;
      letter-spacing: 2rpx;
    }

    .withdraw-money {
      font-size: 60rpx;
      font-weight: 600;
      color: #fff;
      letter-spacing: 2rpx;

      &::before {
        content: '￥';
        font-size: 40rpx;
      }
    }

    .withdraw-box {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 60rpx 30rpx;
      padding: 25rpx;
      border-radius: 20rpx;
      background: #fff;
      box-shadow: rgba(32, 111, 107, 0.2) 0px 7px 10px 0px;

      .withdraw-input {
        position: relative;
        flex: 1;
        font-weight: 700;
        font-size: 35rpx;
        padding: 5rpx 10rpx 15rpx 40rpx;
        border-bottom: 1px solid #efefef;

        &::before {
          content: '￥';
          position: absolute;
          bottom: 14rpx;
          left: 0;
        }
      }

      .withdraw-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 30rpx;
        font-size: 26rpx;
        border-radius: 50rpx;
        color: white;
        background: #1c6460;
        width: 135rpx;
        height: 55rpx;
      }

      .withdraw-tips {
        margin: 30rpx 0 0 5rpx;
        font-size: 25rpx;
        color: #999999;
      }
    }
  }
</style>
